<template>
  <div class="app-container">
    <div class="syl-group">
      <el-calendar id="calendar" v-model="value">
        <template
          slot="dateCell"
          slot-scope="{date,data}"
        >
          <!--自定义内容-->
          <div class="syl-center" @click="getDateValue(data.day)">
            <div class="calendar-day" v-html="data.day.split('-')[2]" />
            <div v-for="item in calendarData" :key="item.id" @click="getCachedFrameMessage(item)">
              <el-popover
                v-if="item.arrangeDate.indexOf(data.day) !==-1 "
                placement="top"
                title="当日菜单"
                width="200"
                trigger="hover"
              >
                <div>
                  <span
                    v-for="(g,index) in mouseEnter(item.goodsPackageSaleTimeList)"
                    :key="index+g"
                    style="color: #666666;font-size: 14px"
                  > {{ g }} <br></span>
                </div>

                <div slot="reference" class="syl-center-day">
                  <div
                    v-for="(i) in getIndexValue(item.goodsPackageSaleTimeList,3)"
                    :key="i.id"
                    ref="package"
                    class="is-selected"
                    v-html="i.packageName"
                  />
                  <div v-if="item.goodsPackageSaleTimeList.length>3" class="is-selected">....</div>
                </div>
              </el-popover>
              <div v-else />
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    <!-- 添加或修改门店对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-transfer
        v-model="validateDisabled"
        :data="data"
        filterable
        filter-placeholder="请输入菜单名称"
        :titles="['所有可选商品','已选商品']"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-preventReClick type="primary" :disabled="disabled" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getDatelist, addSave } from '@/api/menu'
import { likeSelectGoods } from '@/api/commodity/setmeal'
import { parseTime } from '@/utils'

export default {
  name: 'Index',
  inject: ['reload'],
  data() {
    return {
      //  菜单数据
      calendarData: [],
      //  当前时间
      value: new Date(),
      //  遮罩层
      open: false,
      //  标题
      title: '',
      //  绑定的数据
      validateDisabled: [],
      //  回显数据
      valueChecked: [],
      // 查询参数
      queryParams: {},
      //  菜单数据
      thingList: [],
      // 上架套餐
      data: [],
      disabled: false
    }
  },
  created: function() {
    this.getList()
    this.getSelectGoods()
    this.$nextTick(() => {
      // 点击前一个月
      const prevBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(1)'
      )
      prevBtn.addEventListener('click', e => {
        const value = this.value
        this.getLastMonth(value)
      })
      // 点击今天
      const todayBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(2)'
      )
      todayBtn.addEventListener('click', () => {
        this.getList()
      })
      // 点击今天
      const underBtn = document.querySelector(
        '.el-calendar__button-group .el-button-group>button:nth-child(3)'
      )
      underBtn.addEventListener('click', () => {
        const value = this.value
        this.getLastMonth(value)
      })
    })
  },
  mounted() {
    this.getDomName()
  },
  methods: {
    /** 修改日历 **/
    getDomName() {
      document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)').innerHTML = '本月'
    },
    /** 获取数据 **/
    getList() {
      getDatelist(this.getDateValues(this.queryParams)).then(res => {
        this.calendarData = res.data
      })
    },
    /** 获取上架的套餐 **/
    getSelectGoods() {
      likeSelectGoods(this.queryParams).then(res => {
        this.thingList = res.data
      })
    },
    /** 请选择上架商品 **/
    getDateValue(value) {
      let valueName = {}
      this.dateTime = value
      this.data = []
      this.open = true
      this.title = '选择上架的商品' + '  ' + parseTime(value, '{y}年{m}月{d}日')
      this.generateData()
      valueName = this.calendarData.find((item) => item.arrangeDate === value)
      this.getDateTimeName(value)
      this.getCachedFrameMessage(valueName)
    },
    /** 判断日期  **/
    getDateTimeName(value) {
      const data = new Date()
      const valueName = parseTime(data, '{y}-{m}-{d}')
      const name = parseTime(value, '{y}-{m}-{d}')
      this.disabled = name <= valueName
    },
    /** 数据回显 **/
    getCachedFrameMessage(row) {
      if (row !== undefined) {
        const { goodsPackageSaleTimeList } = row
        this.validateDisabled = goodsPackageSaleTimeList.map(item => item.packageId)
      }
    },
    /** 获取菜单 **/
    generateData() {
      const data = this.data
      const cities = this.thingList
      if (cities !== undefined) {
        cities.forEach((item) => {
          data.push({
            key: item.id,
            label: item.goodsName,
            packageTypeId: item.packageTypeId
          })
        })
      }
      return data
    },
    /** 取消 **/
    cancel() {
      this.open = false
      this.disabled = false
      this.data = []
      this.validateDisabled = []
    },
    /** 确定 **/
    submitForm: function() {
      const data = {
        arrangeDate: this.dateTime,
        packageSaleTimeList: this.validateDisabled
      }
      this.disabled = true
      addSave(data).then(res => {
        if (!res.code) {
          this.msgSuccess('添加成功')
          this.reload()
          this.validateDisabled = []
          this.open = false
          this.getList()
        }
      })
    },
    /** 上个月下个月 **/
    getLastMonth(value) {
      getDatelist(this.getDateValues(this.queryParams, value)).then(res => {
        this.calendarData = res.data
      })
    },
    /** 悬浮框内容 **/
    mouseEnter(value) {
      return value.map((item) => item.packageName)
    },
    /** 只显示3个 **/
    getIndexValue(name, value) {
      return name.slice(0, value)
    }
  }
}
</script>

<style lang="scss" scoped>
.calendar-day {
  text-align: right;
  color: #202535;
  line-height: 30px;
  font-size: 16px;
  padding: 0 10px;
}

.is-selected {
  color: #333333;
  font-size: 16px;
  text-align: center;
}

.syl-center {
  width: 100%;
  height: 100%;
}

/deep/ .el-calendar-table tr:nth-child(even) td:nth-child(odd) {
  background-color: #f7f7f7;
}

/deep/ .el-calendar-table tr:nth-child(odd) td:nth-child(even) {
  background-color: #f7f7f7;
}

/deep/ .el-calendar-table thead {

  background-color: #89C6FF;
  margin-bottom: 15px;
}

.is-selected:nth-child(1) {
  color: #fe990b;
}

.is-selected:nth-child(2) {
  color: #ff6860;
}

.is-selected:nth-child(3) {
  color: #32C5B3;
}

.syl-center-day {
  width: 100%;
  height: 70px;
  overflow: hidden;
}

#calendar {
  background-color: transparent;
}

/deep/ .el-calendar-table .el-calendar-day {
  height: 120px;
  padding: 0;
}

/deep/ .current {
  height: 120px;
}

/deep/ .next {
  height: 120px;
}

/deep/ .el-calendar-table {
  width: 100%;
  height: 100%;

  &:not(.is-range) {
    //使不是本月的日期不可点击，不会跳转到其他月份
    td.next {
      pointer-events: none;
    }

    td.prev {
      pointer-events: none;
    }

    //td{
    //    pointer-events: none;
    //}
  }
}

/deep/ .el-calendar__header {
  border: 0;
}

/deep/ .el-calendar__title {
  font-size: 22px;
  font-weight: 500;
}

/deep/ .el-button-group > .el-button:first-child {
  border: 1px solid #5BB0FF;
  border-radius: 5px;
  color: #5BB0FF;
}

/deep/ .el-button-group > .el-button:not(:first-child):not(:last-child) {
  color: white;
  width: 68px;
  border-radius: 5px;
  background: #5BB0FF;
}

/deep/ .el-button-group > .el-button:last-child {
  border: 1px solid #5BB0FF;
  border-radius: 5px;
  color: #5BB0FF;
}

/deep/ .el-button-group > .el-button:not(:last-child) {
  margin-right: 10px;
}

/deep/ .el-popover__title::after {
  content: "\e778";
  font-family: element-icons !important;
}

</style>
